<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>终端日志</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">
</head>

<body>
<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
						<input type="hidden" id="deviceCode" name="deviceCode">
                        <div class="filter-item form-item row">
                            <div class="label"><label>上传时间</label></div>
                            <div class="flex1">
                                <input type="text" placeholder="时间范围" name="dateRange">
                            </div>
                        </div>
                        <div class="filter-item form-item row">
                           <div class="label"><label>日志类型</label></div>
                           <div class="flex1">
                                <div class="areaSelect area-item">
                                    <select name="logType" required>
                                    	<option value="ALL">全部</option>
                                    	<option value="crash">崩溃日志</option>
                                    	<option value="run">运行日志</option>
                                    	<option value="play">播放日志</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="filter-btn z-jc-c z-df">
                            <button class="z-btn z-primary">查询</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <table class="z-table">
                        <thead>
	                        <th>名称</th>
	                        <th>日志类型</th>
	                        <th>上传时间</th>
	                        <th>操作</th>
                        </thead>
                        <tbody>
	                        <tr th:each="log: ${list}">
	                            <td th:text="${log.logName}"></td>
	                            <td th:text="${log.logTypeDesc}"></td>
	                            <td th:text="${log.createTimeDesc}"></td>
	                            <td class="btn-group">
	                                <a th:href="${log.logURL}">下载查看</a>
	                            </td>
	                        </tr>
                        </tbody>
                    </table>

	                <!-- 分页信息 -->
	                <div class="app-card-body">
	                    <!-- 前端分页 -->
	                    <div class="pagination z-pat z-fr"></div>
	                </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/daterangepicker/moment.min.js}"></script>
<script th:src="@{/lib/daterangepicker/daterangepicker.js}"></script>
<script>
	//获取context path
	var context = $("meta[name='ctx']").attr("content");
	
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);
	
 	//处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    
    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });
	
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/ckDeviceInfo/deviceLog";
            var paramStr = createParamStr(pageIndex, pageSize);
            if(paramStr !== ""){
                paramStr = paramStr.substring(1);
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        }
    });
    
    /**
     * 创建参数字符串
     * @param pageIndex 当前页
     * @param pageSize 每页条数
     * @returns {string} 参数字符串
     */
    function createParamStr(pageIndex, pageSize) {
        var dateRange = $("input[name='dateRange']").val();
        var deviceCode = $("input[name='deviceCode']").val();
        var logTypeSelect = $("select[name='logType']").val();
        var url = "";
        if(!isBlank(pageIndex)){
            url = url + "&pageNum=" + pageIndex;
        }
        if(!isBlank(pageSize)){
            url = url + "&pageSize=" + pageSize;
        }
        if(!isBlank(dateRange)){
            url = url + "&dateRange=" + dateRange;
        }
        if(!isBlank(deviceCode)){
            url = url + "&deviceCode=" + deviceCode;
        }
        if(!isBlank(logTypeSelect)){
            url = url + "&logType=" + logTypeSelect;
        }
        return url;
    }
    
   	 //检查参数
     function isBlank(param) {
         if(undefined === param){
             return true;
         }
         if(null == param){
             return true;
         }
         if("" === param){
             return true;
         }
         return false;
     }
     
    //初始化时间选择
    $('input[name="dateRange"]').daterangepicker({
        "showDropdowns": true,
        "showWeekNumbers": true,
        "showISOWeekNumbers": true,
        "autoApply": true,
        "autoUpdateInput": false,
        "opens": "right",
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },

        "locale": {
            "format": "YYYY/MM/DD",
            "separator": "-",
        },
        "showCustomRangeLabel": false,
        "alwaysShowCalendars": true,
        // "startDate": moment().subtract(6, 'days'),
        // "endDate": moment(),
        "maxDate": moment()
    }, function (start, end, label) {

        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    }).on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('YYYY/MM/DD') + '-' + picker.endDate.format('YYYY/MM/DD'));
    });
	
</script>
<script>
</script>

</body>

</html>